<template>
  <div class="quikcRePayment">
    <van-nav-bar title="快速还款" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="container">
      <div class="card">
        <div class="left">
          <div class="cardName-wapper">
            <div class="logo"></div>
            <div class="cardname">中国移动联名卡(9366)</div>
          </div>
          <div class="rePayment-date">
            <span>还款日 06/22</span>
            <span class="desc">本期未还清</span>
          </div>
        </div>
        <van-button size="small" round type="danger" class="chageAccount">切换账户</van-button>
      </div>
      <div class="select-rePayment-type">
        <van-radio-group v-model="selectRadio">
          <van-radio name="1" icon-size="0.18rem" checked-color="#ee0a24">还款</van-radio>
          <div class="input-wapper">
            <div class="symbol">￥</div>
            <input class="num" type="number" v-model="moneyValue" />
          </div>
          <van-radio name="2" icon-size="0.18rem" checked-color="#ee0a24">
            <div class="content">
              <span class="start">最低还款</span>
              <span class="end">还款压力小</span>
            </div>
          </van-radio>
          <div class="min-repayment">
            <div>最低还款不影响个人征信</div>
            <div class="min-money">￥1468.38</div>
          </div>
        </van-radio-group>
      </div>
      <div class="bottom-tips">
        <span class="link-text">自动还款</span>
        <span>&nbsp 到期自动还</span>
      </div>
      <div class="tip-desc">
        温馨提示：
        <div>1. 如选择最低还款方式还款将不会影响您的信用记录，但不再享受免息还款器待遇</div>
        <div>2. 他行借记卡还信用卡单笔最低金额为1元；客户单日还款比数为100笔，单月累计还款笔数为3000000笔；客户单日还款限额为100000元，单月累计还款限额为3000000元。</div>
      </div>
    </div>
    <feelingFixedButton @click="completeRePayment">立即还款</feelingFixedButton>
  </div>
</template>

<script>
import feelingFixedButton from "@/components/feelingFixedButton.vue";
export default {
  name: "quikcRePayment",
  components: { feelingFixedButton },
  data() {
    return {
      selectRadio: "1",
      moneyValue: "18895.64"
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    completeRePayment() {
      this.openWithPanel();
      setTimeout(() => {
        this.hideWithPanel();
        this.$router.push("/repayment/rePaymentResult");
      }, 2500);
    }
  }
};
</script>

<style lang='less' scoped>
.quikcRePayment {
  height: 100vh;
  background-color: #f7f7f7;
  .container {
    width: 100%;
    padding: 0.15rem 0.18rem 0rem 0.18rem;
    box-sizing: border-box;
    .card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.18rem 0.12rem;
      box-sizing: border-box;
      // width: 3.34rem;
      height: 0.7rem;
      background-color: #fff;
      border-radius: 0.05rem 0.05rem 0 0;
      border-bottom-color: #fbfbfb;
      border-bottom-width: 0.01rem;
      border-bottom-style: solid;
      .chageAccount {
        width: 0.8rem;
      }
      .left {
        .cardName-wapper {
          .cardname {
            font-size: 0.16rem;
            font-weight: 600;
          }
        }
        .rePayment-date {
          font-size: 0.12rem;
          margin-top: 0.08rem;
          .desc {
            display: inline-block;
            width: 0.7rem;
            text-align: center;
            font-size: 0.11rem;
            height: 0.2rem;
            line-height: 0.2rem;
            color: #688ad3;
            margin-left: 0.05rem;
            border-radius: 0.02rem;
            background-color: #dfe8ff;
          }
        }
      }
    }
    .select-rePayment-type {
      padding: 0.2rem 0.12rem 0.18rem 0.12rem;
      box-sizing: border-box;
      height: 1.6rem;
      border-radius: 0 0 0.05rem 0.05rem;
      background-color: #fff;
      .input-wapper {
        display: flex;
        color: #323232;
        align-items: center;
        margin: 0.15rem 0;
        .symbol {
          font-size: 0.26rem;
        }
        .num {
          display: inline-block;
          border: none;
          width: 100%;
          font-size: 0.3rem;
          font-weight: 700;
          padding: 0;
        }
      }
      .content {
        margin-top: 0.01rem;
        .start {
          font-size: 0.16rem;
          font-weight: 700;
        }
        .end {
          display: inline-block;
          width: 0.7rem;
          text-align: center;
          font-size: 0.1rem;
          height: 0.18rem;
          color: #fff;
          margin-left: 0.05rem;
          border-radius: 0.02rem;
          background-color: #ee0a24;
        }
      }
      .min-repayment {
        position: relative;
        display: flex;
        justify-content: space-between;
        font-size: 0.12rem;
        color: #8c8e8f;
        padding-top: 0.05rem;
        padding-left: 0.25rem;
        box-sizing: border-box;
        // overflow: hidden;
        .min-money {
          position: absolute;
          right: 0;
          top: -0.05rem;
          font-size: 0.16rem;
          color: #000;
          font-weight: 600;
        }
      }
    }
    .bottom-tips {
      margin-top: 0.15rem;
      text-align: center;
      font-size: 0.12rem;
      font-weight: 500;
      .link-text {
        color: #6f98e1;
      }
    }
    .tip-desc {
      margin-top: 0.18rem;
      color: #c0c0c0;
      font-size: 0.13rem;
    }
  }
}
</style>